<template>
    <el-row>
        <el-col :span="24">
            <div class="search">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
        </el-col>
        <el-col :span="24">
            <div class="tags">
                <el-tag v-for="tag in tags" :key="tag" :type="isSelected(tag) ? 'success' : ''"
                    @click="toggleSelection(tag)" closable>
                    {{ tag }}
                </el-tag>
            </div>
        </el-col>
        <el-col :span="24">
            <!-- 博客内容列表 -->
            <div class="blog-list">
                <div v-for="blog in filteredBlogs" :key="blog.id" class="blog-item">
                    <el-image class="blog-image" :src="url" fit="contain"></el-image>
                    <div class="blog-content">
                        <h3>{{ blog.title }}</h3>
                        <p>{{ blog.content }}</p>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            input: '',
            tags: ['Vue', 'JavaScript', 'HTML', 'CSS', 'Node.js', 'Python'],
            selectedTags: [],
            blogs: [
                { id: 1, title: '第一篇博客', content: '这是关于Vue的博客', tags: ['Vue', 'JavaScript'] },
                { id: 2, title: '第二篇博客', content: '这是关于Python的博客', tags: ['Python'] },
                { id: 3, title: '第三篇博客', content: '这是关于Node.js的博客', tags: ['Node.js', 'JavaScript'] },
                // 更多博客内容...
            ],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

        };
    },
    computed: {
        filteredBlogs() {
            if (this.selectedTags.length === 0 && this.input.trim() === '') {
                return this.blogs;
            }
            return this.blogs.filter(blog => {
                const matchesTags = this.selectedTags.length === 0 || this.selectedTags.some(tag => blog.tags.includes(tag));
                const matchesInput = this.input.trim() === '' || blog.title.includes(this.input) || blog.content.includes(this.input);
                return matchesTags && matchesInput;
            });
        }
    },
    methods: {
        handleSearch() {
            console.log('搜索内容：', this.input);
        },
        toggleSelection(tag) {
            const index = this.selectedTags.indexOf(tag);
            if (index > -1) {
                this.selectedTags.splice(index, 1);
            } else {
                this.selectedTags.push(tag);
            }
        },
        isSelected(tag) {
            return this.selectedTags.includes(tag);
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 0px;
}

.el-col {
    border-radius: 4px;
}

.search {
    margin: 10px;
    width: 300px;
    float: right;
    display: flex;
}

.el-button {
    margin-left: 5px;
}

.grid-content {
    padding: 0px;
}

.tags {
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
}

.tags .el-tag {
    cursor: pointer;
    margin: 5px;
}

.blog-list {
    padding: 20px;
}

.blog-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.blog-image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.blog-content {
    flex: 1;
}

.blog-item h3 {
    margin: 0 0 10px;
}

.blog-item p {
    margin: 0;
}
</style>
